<template>
	<view class="custom-pop-menu">
        <view class="custom-pop-menu-add" @click.native="showPop()">
            <image class="custom-pop-menu-icon" :src="'/static/imgs/icon/add.png'"></image>
        </view>
        <uni-popup ref="popupMenu" type="bottom" :maskClick="true">
        	<view class="custom-pop-menu-main">
        		<view v-for="(menu, index) in menus" :key="index"
                    @click.native="menuClick(menu)"
                    class="custom-pop-menu-main-menu"
                    :class="{'custom-pop-menu-main-menu-bottom': index < (menus.length - 1)}"
                >
                    {{ menu.name }}
                </view>
                
        	</view>
            <view class="custom-pop-menu-cancel" @click.native="cancel()">
                取消
            </view>
        </uni-popup>
	</view>
</template>

<script>
    import { UniPopup } from '@/components/uni-popup/uni-popup.vue';
    
	export default {
        components: { UniPopup },
        props: {
            /**
             * 菜单类型，
             * 默认为0，只支持图片, 1增加语音支持和视频支持
             * 可自定修改
             */
            menuType: {
            	type: String,
            	default() {
            		return '0';
            	}
            },
            /**
             * 是否显示弹出菜单
             */
			showMenu: {
				type: Boolean,
				default: false
			},
            
            /**
             * 回调函数方法名，默认为filePicked
             */
            filePicked: {
            	type: String,
            	default() {
            		return 'filePicked';
            	}
            },
            
            /**
             * 附件业务类型
             */
            bizType: {
            	type: String,
            	default() {
            		return '';
            	}
            },
            
            /**
             * 附件分组
             */
            fileGroup: {
                type: String,
                default() {
                	return '';
                }
            },
            /**
             * 位置
             */
            poses: {
                type: Array,
                 default() {
                 	return [];
                 }
            }
            
		},
        model: {
            prop: 'showMenu',
            event: 'input'
        },
		data() {
			return {
                menus: [
                    { name: "拍照", value: "1" },
                    { name: "从相册选取图片", value: "2" },
                ],
			}
		},
        created() {
            if (this.menuType == "1") {
                this.menus.push({ name: "录制视频", value: "3" });
                this.menus.push({ name: "从相册选取视频", value: "4" });
                this.menus.push({ name: "录音", value: "5" });
            }
            console.log(this.poses);
        },
        computed: {
            
        },
		methods: {
            cancel () {
                this.$refs.popupMenu.close();
            },
            
            showPop () {
                this.$refs.popupMenu.open();
            },
            
            menuClick (item) {
                let __this = this;
                let returnValue = "";
                let fileType = "";
                if (item.value == "1" || item.value == "2") {
                    fileType = "image";
                } else if (item.value == "3" || item.value == "4") {
                    fileType = "video";
                } else if (item.value == "5") {
                    fileType = "audio";
                }
                let callback = ((res) => {
                    // console.log(JSON.stringify(res));
                    if (__this.$refs.popupMenu) {
                        __this.$refs.popupMenu.close();
                    }
                    if (res.status == 1) {
                        returnValue = {
                            src: res.data[0],
                            fileType: fileType,
                            bizType: __this.bizType || "",
                            fileGroup: __this.fileGroup || "",
                            poses: __this.poses || "",
                        }
                    	__this.$emit(__this.filePicked, returnValue);
                    } else {
                    	// __this.$dialog.toast({
                    	// 	// mes: res.msg,
                    	// 	mes: '未选择图片',
                    	// 	timeout: 1500,
                    	// 	icon: 'error',
                        // });
                    }
                });
                switch (item.value) {
                    case "1":
                        // 拍照
                        window.app.picture.camera({
                            quality: 100,
                        	destinationType: 1,
                        	allowEdit: 0,
                            callback: callback
                        });
                        break;
                    case "2":
                        // 从相册选取图片
                        window.app.picture.getImage({
                            quality: 100,
                            destinationType: 1,
                            allowEdit: 0,
                        	callback: callback
                        });
                        break;
                    case "3":
                        // 录制视频
                        window.app.capture.video({
                        	callback: callback
                        });
                        break;
                    case "4":
                        // 从相册选取视频
                        window.app.video.getVideo({
                        	callback: callback
                        });
                        break;
                    case "5":
                        // 录音
                        window.app.capture.audio({
                        	callback: callback
                        });
                        break;
                }
            },
		},
        watch: {
        },
	}
</script>

<style lang="scss" scoped>
    /deep/ .uni-popup {
        z-index: 999;
    }
    .custom-pop-menu {
        .custom-pop-menu-add {
            width: 130rpx;
            height: 130rpx;
            border-radius: 5rpx;
            margin: 15rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5rpx;
            border: 1rpx dotted #e5e5e5;
            
            .custom-pop-menu-icon {
                width: 48rpx;
                height: 48rpx;
            }
        }
        
        .custom-pop-menu-main {
            margin: 15rpx 30rpx;
            background: #ffffff;
            border-radius: 15rpx;
            padding: 20rpx;
            
            .custom-pop-menu-main-menu {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 30rpx;
                color: #666666;
                font-size: 34rpx;
            }
            
            .custom-pop-menu-main-menu-bottom {
                border-bottom: 1rpx solid #f6f6f6;
            }
        }
        
        .custom-pop-menu-cancel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30rpx;
            color: #666666;
            font-size: 34rpx;
            margin: 15rpx 30rpx;
            background: #ffffff;
            border-radius: 15rpx;
        }
        
    }
    
</style>
